<template>
    <div>
        <div>
            <el-input style="width: 15% ;margin-right: 60px" size="mini"  v-model="serchDeptIndex" placeholder="请输入科室名称"></el-input>
            <el-button size="mini" type="primary" style="margin-right: 60px" @click="serchDeptByName">查询科室</el-button>
            <el-button size="mini" type="primary" @click="addDept">新增科室</el-button>
        </div>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="deptData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="selectChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="科室编号"
                        width="120">
<!--                    <template slot-scope="scope"></template>-->
                </el-table-column>
                <el-table-column
                        prop="deptname"
                        label="科室名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="constantitem.constantname"
                        label="科室分类"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="departmentType.deptTypt"
                        label="科室类型"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="danger" size="mini" :disabled="mulDeltBen" @click="mulDeleteDept">批量删除</el-button>
<!--            分页处理-->
            <el-pagination
                    @current-change="changePage"
                    :current-page="pageNum"
                    style="text-align: center"
                    background
                    layout="prev, pager, next"
                    :total="pageTotal">
            </el-pagination>
<!--            新增科室-->
            <el-dialog
                    style="text-align: center"
                    title="新建科室"
                    :visible.sync="dialogAddVisible">
                <el-form :model="addDeptWord" class="AddDeptForm">
                    <div class="AddDeptForm">
                        <el-form-item label="科室编码：" label-width="100px">
                            <el-input v-model="addDeptWord.deptCode" size="small" placeholder="科室编码"></el-input>
                        </el-form-item>
                        <el-form-item label="科室名称：" label-width="100px" >
                            <el-input v-model="addDeptWord.deptName" autocomplete="off"size="small" placeholder="科室名称"></el-input>
                        </el-form-item>
                    </div>
                    <div class="AddDeptForm">
                        <span>科室分类:</span><el-select class="AddDeptselect" size="small" v-model="addDeptWord.constantId" placeholder="请选择">
                            <el-option
                                    v-for="item in constantList"
                                    :key="item.id"
                                    :label="item.constantname"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <span>科室类别:</span><el-select class="AddDeptselect" size="small" v-model="addDeptWord.deptTyptId" placeholder="请选择">
                        <el-option
                                v-for="item in deptTyptList"
                                :key="item.id"
                                :label="item.deptTypt"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer" >
                    <el-button type="warning" @click="cancelAddDept">取消</el-button>
                    <el-button type="primary" @click="saveAddDept">保存</el-button>
                </div>
            </el-dialog>
<!--            编辑科室-->
            <el-dialog
                    style="text-align: center"
                    title="编辑科室"
                    :visible.sync="dialogEditVisible">
                <el-form :model="editDeptWord" class="AddDeptForm">
                    <div class="AddDeptForm">
                        <el-form-item label="科室编码：" label-width="100px">
                            <el-input v-model="editDeptWord.deptCode" size="small" placeholder="科室编码"></el-input>
                        </el-form-item>
                        <el-form-item label="科室名称：" label-width="100px" >
                            <el-input v-model="editDeptWord.deptName" autocomplete="off"size="small" placeholder="科室名称"></el-input>
                        </el-form-item>
                    </div>
                    <div class="AddDeptForm">{{editDeptWord.constantId}}
                        <span>科室分类:</span><el-select class="AddDeptselect" size="small" v-model="editDeptWord.constantId" placeholder="请选择">
                        <el-option
                                v-for="item in constantList"
                                :key="item.id"
                                :label="item.constantname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                        <span>科室类别:</span><el-select class="AddDeptselect"  size="small" v-model="editDeptWord.deptTyptId"  placeholder="请选择">
                        <el-option
                                v-for="item in deptTyptList"
                                :key="item.id"
                                :label="item.deptTypt"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer" >
                    <el-button type="warning" @click="canceleditDept">取消</el-button>
                    <el-button type="primary" @click="saveEditDept">保存</el-button>
                </div>
            </el-dialog>

        </div>

    </div>
</template>

<script>
    export default {
        name: "SysDept",
        data(){
            return{
                deletSelections:[],
                mulDeltBen:true,

                editDeptWord: {
                    deptId:'',
                    deptCode: '',
                    deptName:'',
                    constantId:'',
                    deptTyptId:''
                },

                dialogEditVisible:false,

                addDeptWord: {
                    deptCode: '',
                    deptName:'',
                    constantId:'',
                    deptTyptId:''
                },
                constantList:[],//科室分类列表

                deptTyptList:[],//科室类别列表

                dialogAddVisible:false,

                pageTotal:0,
                pageNum:1,
                pageSize:10,

                serchDeptIndex:'',//输入框输入的查询索引
                deptData: [],//表格数据
            }
        },
        methods:{

            //批量删除
            mulDeleteDept(){
                this.$confirm('此操作将永久批量删除该栏目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids='?';
                    this.deletSelections.forEach((item,i)=>{
                        ids+='ids='+item.id+'&';
                    })
                    this.$deleteRequest('/sys/scheduling/mulDelDepts'+ids).then(resp => {
                        if (resp) {
                            this.initDeptTableData();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });


            },
            //复选框回调
            selectChange(selection){
                if(selection.length>1){
                   this.mulDeltBen=false;
                }else{
                    this.mulDeltBen=true;
                }

                this.deletSelections=selection;
            },
            //删除table数据
            handleDelete(row){
                this.$confirm('此操作将永久删除该栏目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$deleteRequest('/sys/scheduling/delDept/'+row.id).then(resp => {
                        if (resp) {
                            this.initDeptTableData();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            //取消编辑保存
            canceleditDept(){

                this.editDeptWord.deptCode = '';
                this.editDeptWord.deptName = '';
                this.editDeptWord.constantId = '';
                this.editDeptWord.deptTyptId = '';
            },
            //编辑保存
            saveEditDept(){
                this.$putRequest("/sys/scheduling/editDept",this.editDeptWord).then(resp=>{
                    if (resp) {
                        this.initDeptTableData();
                        this.dialogEditVisible = false;
                        this.editDeptWord.deptCode = '';
                        this.editDeptWord.deptName = '';
                        this.editDeptWord.constantId = '';
                        this.editDeptWord.deptTyptId = '';
                    }
                })

            },
            //表格编辑按钮
            handleEdit(row){
                this.dialogEditVisible=true;
                this.InitAddEditDept();
                this.editDeptWord.deptId=row.id;
                this.editDeptWord.deptCode = row.deptcode;
                this.editDeptWord.deptName = row.deptname;
                this.editDeptWord.constantId =row.constantitem.id ;
                this.editDeptWord.deptTyptId =row.departmentType.id;
            },
            //取消新增
            cancelAddDept(){
                this.addDeptWord.deptCode = '';
                this.addDeptWord.deptName = '';
                this.addDeptWord.constantId = '';
                this.addDeptWord.deptTyptId = '';
            },
            //保存新增
            saveAddDept(){
                this.$postRequest("/sys/scheduling/addDept",this.addDeptWord).then(resp=>{
                    if (resp) {
                        this.initDeptTableData();
                        this.dialogAddVisible = false;
                        this.addDeptWord.deptCode = '';
                        this.addDeptWord.deptName = '';
                        this.addDeptWord.constantId = '';
                        this.addDeptWord.deptTyptId = '';
                    }

                })
            },
            //新增科室
            addDept(){
                this.dialogAddVisible=true;
                this.InitAddEditDept();
            },
            //新增编辑科室初始化下拉菜单
            InitAddEditDept(){
              this.$getRequest("/sys/scheduling/serchconstantList").then(resp=>{
                  if(resp){
                      this.constantList=resp;
                  }
                })
              this.$getRequest("/sys/scheduling/serchdeptTyptList").then(resp=>{
                  if (resp){
                      this.deptTyptList=resp;

                  }
              })

            },
            //查询科室
            serchDeptByName(){
                this.initDeptTableData();
                this.serchDeptIndex="";
            },
            changePage(page){
              this.pageNum=page;
              this.initDeptTableData();
            },

            //初始化表格数据
            initDeptTableData(){
                this.$getRequest("/sys/scheduling/serchTableData?keyword="+this.serchDeptIndex+"&pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(resp=>{
                    if (resp){
                        console.log(resp);
                        this.deptData=resp.list;
                        this.pageTotal=resp.total;
                    }
                })
            }
        },
        mounted(){
            this.initDeptTableData();
        }
    }
</script>

<style scoped>
    .AddDeptForm{
        display: flex;
        flex-flow:row wrap;
    }
    .dialog-footer{
        text-align: center;
    }
    .AddDeptForm span{
        margin: 20px;

    }
    .AddDeptselect {
        margin-top: 15px;
    }

</style>